import React from 'react';
import ReactMarkdown from 'react-markdown';
import styled from 'styled-components';

type Platform = 'xiaohongshu' | 'wechat' | 'zhihu' | 'toutiao' | 'nowcoder' | 'baijiahao' | 'juejin';
type DeviceType = 'mobile' | 'desktop';

interface PlatformPreviewProps {
  markdown: string;
  platform: Platform;
  deviceType: DeviceType;
  isDarkMode: boolean;
  markdownTheme: string;
  codeBlockTheme: string;
}

const PreviewContainer = styled.div`
  height: 100%;
  overflow: auto;
  background-color: ${props => props.theme.isDark ? '#1f1f1f' : '#fff'};
  color: ${props => props.theme.isDark ? '#f0f0f0' : '#000'};
`;

const MobilePreview = styled.div`
  max-width: 375px;
  height: 100%;
  margin: 0 auto;
  border: 10px solid ${props => props.theme.isDark ? '#444' : '#333'};
  border-radius: 20px;
  overflow: auto;
  padding: 16px;
  background-color: ${props => props.theme.codeBackground || (props.theme.isDark ? '#1f1f1f' : '#fff')};
`;

const DesktopPreview = styled.div`
  width: 100%;
  height: 100%;
  border: 1px solid ${props => props.theme.isDark ? '#444' : '#ddd'};
  overflow: auto;
  padding: 24px;
  background-color: ${props => props.theme.codeBackground || (props.theme.isDark ? '#1f1f1f' : '#fff')};
`;

// 基础平台容器样式
const BasePlatformContainer = styled.div`
  background-color: ${props => props.theme.codeBackground || (props.theme.isDark ? '#1f1f1f' : '#fff')};
  color: ${props => props.theme.isDark ? '#f0f0f0' : 'inherit'};
`;

// Platform-specific styled containers
const XiaohongshuContainer = styled(BasePlatformContainer)`
  font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  
  h1, h2, h3 {
    margin-bottom: 16px;
  }
  
  p {
    margin-bottom: 12px;
  }
  
  img {
    border-radius: 8px;
    margin-bottom: 12px;
  }
`;

const WechatContainer = styled(BasePlatformContainer)`
  font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
  color: ${props => props.theme.isDark ? '#f0f0f0' : '#333'};
  line-height: 1.75;
  
  h1 {
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: bold;
  }
  
  h2 {
    font-size: 20px;
    margin-bottom: 16px;
    font-weight: bold;
  }
  
  p {
    margin-bottom: 16px;
  }
  
  blockquote {
    padding: 12px 16px;
    background-color: ${props => props.theme.isDark ? '#2a2a2a' : '#f7f7f7'};
    border-left: 4px solid #07c160;
    margin-bottom: 16px;
  }
`;

const ZhihuContainer = styled(BasePlatformContainer)`
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  line-height: 1.7;
  
  h1 {
    font-size: 24px;
    margin-bottom: 24px;
    font-weight: bold;
  }
  
  h2 {
    font-size: 18px;
    margin-bottom: 16px;
    font-weight: bold;
  }
  
  p {
    margin-bottom: 16px;
  }
  
  blockquote {
    padding: 12px 16px;
    background-color: ${props => props.theme.isDark ? '#2a2a2a' : '#f6f6f6'};
    border-left: 3px solid #0066ff;
    margin-bottom: 16px;
  }
`;

const ToutiaoContainer = styled(BasePlatformContainer)`
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  line-height: 1.8;
  
  h1 {
    font-size: 22px;
    margin-bottom: 20px;
    font-weight: bold;
  }
  
  h2 {
    font-size: 18px;
    margin-bottom: 16px;
    font-weight: bold;
  }
  
  p {
    margin-bottom: 16px;
  }
`;

const NowcoderContainer = styled(BasePlatformContainer)`
  font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  
  h1 {
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: bold;
  }
  
  h2 {
    font-size: 20px;
    margin-bottom: 16px;
    font-weight: bold;
  }
  
  pre {
    background-color: ${props => props.theme.isDark ? '#2a2a2a' : '#f5f5f5'};
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 16px;
    overflow-x: auto;
  }
  
  code {
    font-family: Consolas, Monaco, 'Andale Mono', monospace;
    background-color: ${props => props.theme.isDark ? '#2a2a2a' : '#f5f5f5'};
    padding: 2px 4px;
    border-radius: 3px;
  }
`;

const BaijiahaoContainer = styled(BasePlatformContainer)`
  font-family: 'PingFang SC', 'Microsoft YaHei', 'SimSun', sans-serif;
  line-height: 1.8;
  color: ${props => props.theme.isDark ? '#f0f0f0' : '#222'};
  
  h1 {
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: bold;
    color: ${props => props.theme.isDark ? '#f0f0f0' : '#222'};
  }
  
  h2 {
    font-size: 20px;
    margin-bottom: 16px;
    font-weight: bold;
    color: ${props => props.theme.isDark ? '#f0f0f0' : '#222'};
  }
  
  h3 {
    font-size: 18px;
    margin-bottom: 14px;
    font-weight: bold;
    color: ${props => props.theme.isDark ? '#f0f0f0' : '#222'};
  }
  
  p {
    margin-bottom: 16px;
    font-size: 16px;
  }
  
  blockquote {
    padding: 15px;
    background-color: ${props => props.theme.isDark ? '#2a2a2a' : '#f5f5f5'};
    border-left: 4px solid #4e6ef2;
    margin-bottom: 16px;
    color: ${props => props.theme.isDark ? '#aaa' : '#666'};
  }
  
  code {
    font-family: Consolas, Monaco, 'Andale Mono', monospace;
    background-color: ${props => props.theme.isDark ? '#2a2a2a' : '#f5f5f5'};
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 14px;
  }
  
  pre {
    background-color: ${props => props.theme.isDark ? '#2a2a2a' : '#f5f5f5'};
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 16px;
    overflow-x: auto;
  }
`;

const JuejinContainer = styled(BasePlatformContainer)`
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  line-height: 1.75;
  color: ${props => props.theme.isDark ? '#e3e3e3' : '#252933'};
  
  h1 {
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: bold;
    color: ${props => props.theme.isDark ? '#e3e3e3' : '#252933'};
  }
  
  h2 {
    font-size: 20px;
    margin-bottom: 16px;
    font-weight: bold;
    color: ${props => props.theme.isDark ? '#e3e3e3' : '#252933'};
  }
  
  h3 {
    font-size: 18px;
    margin-bottom: 14px;
    font-weight: bold;
    color: ${props => props.theme.isDark ? '#e3e3e3' : '#252933'};
  }
  
  p {
    margin-bottom: 16px;
    font-size: 15px;
  }
  
  blockquote {
    padding: 15px;
    background-color: ${props => props.theme.isDark ? '#2a2a2a' : '#f7f8fa'};
    border-left: 4px solid #1e80ff;
    margin-bottom: 16px;
    color: ${props => props.theme.isDark ? '#aaa' : '#666'};
  }
  
  code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    background-color: ${props => props.theme.isDark ? '#2a2a2a' : '#f6f8fa'};
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 14px;
  }
  
  pre {
    background-color: ${props => props.theme.isDark ? '#2a2a2a' : '#f6f8fa'};
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 16px;
    overflow-x: auto;
  }
  
  a {
    color: #1e80ff;
    text-decoration: none;
  }
  
  img {
    max-width: 100%;
    border-radius: 4px;
    margin-bottom: 16px;
  }
`;

// 自定义样式容器，用于应用主题
const StyledMarkdownContainer = styled.div<{ codeTheme: string }>`
  /* 重置内联代码样式，确保它们不受代码主题影响 */
  code:not(pre code) {
    /* 这里不设置具体样式，让App.css中的样式生效 */
    background-color: inherit;
    color: inherit;
  }

  /* 应用代码块主题 */
  pre {
    &.code-block {
      background-color: inherit;
    }
  }
  
  /* 确保代码块主题应用到所有代码块 */
  &.code-theme-applied pre {
    position: relative;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: -1;
      border-radius: inherit;
    }
  }
  
  /* 为每个代码块主题添加特定样式 */
  &.code-theme-github pre::before {
    background-color: #f6f8fa;
  }
  
  &.code-theme-atom-one-dark pre::before {
    background-color: #282c34;
  }
  
  &.code-theme-atom-one-light pre::before {
    background-color: #fafafa;
  }
  
  &.code-theme-monokai pre::before {
    background-color: #272822;
  }
  
  &.code-theme-dracula pre::before {
    background-color: #282a36;
  }
  
  &.code-theme-vs pre::before {
    background-color: #ffffff;
  }
  
  &.code-theme-vs-dark pre::before {
    background-color: #1e1e1e;
  }
  
  &.code-theme-solarized-light pre::before {
    background-color: #fdf6e3;
  }
  
  &.code-theme-solarized-dark pre::before {
    background-color: #002b36;
  }
  
  &.code-theme-nord pre::before {
    background-color: #2e3440;
  }
   
  /* 新增主题样式 */
  &.code-theme-one-dark-pro pre::before {
    background-color: #282c34;
  }
  
  &.code-theme-material pre::before {
    background-color: #263238;
  }
  
  /* Material主题亮色变体 */
  &.code-theme-material.light pre::before {
    background-color: #fafafa;
  }
  
  &.code-theme-night-owl pre::before {
    background-color: #011627;
  }
  
  &.code-theme-synthwave pre::before {
    background-color: #2b213a;
  }
  
  &.code-theme-github-plus pre::before {
    background-color: #f8f8f8;
  }
  
  /* GitHub Plus主题暗色变体 */
  &.code-theme-github-plus.dark pre::before {
    background-color: #0d1117;
  }
  
  /* 主题特定的代码颜色 */
  &.code-theme-github pre code {
    color: #24292e;
  }
  
  &.code-theme-atom-one-dark pre code {
    color: #abb2bf;
  }
  
  &.code-theme-atom-one-light pre code {
    color: #383a42;
  }
  
  &.code-theme-monokai pre code {
    color: #f8f8f2;
  }
  
  &.code-theme-dracula pre code {
    color: #f8f8f2;
  }
  
  &.code-theme-vs pre code {
    color: #000000;
  }
  
  &.code-theme-vs-dark pre code {
    color: #d4d4d4;
  }
  
  &.code-theme-solarized-light pre code {
    color: #657b83;
  }
  
  &.code-theme-solarized-dark pre code {
    color: #839496;
  }
  
  &.code-theme-nord pre code {
    color: #d8dee9;
  }
  
  &.code-theme-one-dark-pro pre code {
    color: #abb2bf;
  }
  
  &.code-theme-material pre code {
    color: #eeffff;
  }
  
  &.code-theme-material.light pre code {
    color: #37474f;
  }
  
  &.code-theme-night-owl pre code {
    color: #d6deeb;
  }
  
  &.code-theme-synthwave pre code {
    color: #f92aad;
    text-shadow: 0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3;
  }
  
  &.code-theme-github-plus pre code {
    color: #333;
  }
  
  &.code-theme-github-plus.dark pre code {
    color: #c9d1d9;
  }
`;

// 获取代码主题的背景色
const getCodeThemeBackground = (theme: string, isDark: boolean): string => {
  // 默认背景色
  const defaultLight = '#fff';
  const defaultDark = '#1f1f1f';
  
  // 根据主题返回对应的背景色
  switch (theme) {
    case 'github':
      return isDark ? '#0d1117' : '#f6f8fa';
    case 'atom-one-dark':
      return '#282c34';
    case 'atom-one-light':
      return '#fafafa';
    case 'monokai':
      return '#272822';
    case 'dracula':
      return '#282a36';
    case 'vs':
      return '#ffffff';
    case 'vs-dark':
      return '#1e1e1e';
    case 'solarized-light':
      return '#fdf6e3';
    case 'solarized-dark':
      return '#002b36';
    case 'nord':
      return '#2e3440';
    case 'one-dark-pro':
      return '#282c34';
    case 'material':
      return isDark ? '#263238' : '#fafafa';
    case 'night-owl':
      return '#011627';
    case 'synthwave':
      return '#2b213a';
    case 'github-plus':
      return isDark ? '#0d1117' : '#f8f8f8';
    default:
      return isDark ? defaultDark : defaultLight;
  }
};

const PlatformPreview: React.FC<PlatformPreviewProps> = ({ 
  markdown, 
  platform, 
  deviceType, 
  isDarkMode,
  markdownTheme,
  codeBlockTheme
}) => {
  // Select the appropriate container based on platform
  const getPlatformContainer = () => {
    switch (platform) {
      case 'xiaohongshu':
        return XiaohongshuContainer;
      case 'wechat':
        return WechatContainer;
      case 'zhihu':
        return ZhihuContainer;
      case 'toutiao':
        return ToutiaoContainer;
      case 'nowcoder':
        return NowcoderContainer;
      case 'baijiahao':
        return BaijiahaoContainer;
      case 'juejin':
        return JuejinContainer;
      default:
        return XiaohongshuContainer;
    }
  };

  const PlatformContainer = getPlatformContainer();
  const PreviewWrapper = deviceType === 'mobile' ? MobilePreview : DesktopPreview;

  // 构建主题类名
  const themeClassName = `markdown-preview markdown-theme-${markdownTheme}`;
  const darkModeClass = isDarkMode ? 'dark-mode' : '';
  
  // 处理特殊主题的暗色模式变体
  let codeThemeClass = `code-theme-applied code-theme-${codeBlockTheme}`;
  if (isDarkMode) {
    if (codeBlockTheme === 'github-plus') {
      codeThemeClass += ' dark';
    } else if (codeBlockTheme === 'material') {
      codeThemeClass = codeThemeClass.replace('material', 'material light');
    }
  }
  
  // 获取代码主题的背景色
  const codeThemeBackground = getCodeThemeBackground(codeBlockTheme, isDarkMode);

  return (
    <PreviewContainer theme={{ isDark: isDarkMode }}>
      <PreviewWrapper theme={{ isDark: isDarkMode, codeBackground: codeThemeBackground }}>
        <PlatformContainer 
          className={`${themeClassName} ${darkModeClass}`} 
          theme={{ 
            isDark: isDarkMode,
            codeBackground: codeThemeBackground 
          }}
        >
          <StyledMarkdownContainer codeTheme={codeBlockTheme} className={codeThemeClass}>
            <ReactMarkdown>{markdown}</ReactMarkdown>
          </StyledMarkdownContainer>
        </PlatformContainer>
      </PreviewWrapper>
    </PreviewContainer>
  );
};

export default PlatformPreview;
